<script setup>
import GoGo from './components/GoGo.vue'
</script>

<template>
    <!-- 路由内置一个路由跳转组件 router-link -->
    <!-- <ul>
        <li><a href="/login">登录</a></li>
        <li><a href="/register">注册</a></li>
        <li><a href="/findpassword">找回密码</a></li>
    </ul> -->
    <!-- 基本路由跳转 -->
    <ul>
        <li><router-link to="/login">登录</router-link></li>
        <li><router-link to="/register">注册</router-link></li>
        <li><router-link to="/findpassword/张学友">找回密码</router-link></li>
    </ul>
    <ol>
        <li><router-link active-class="hightLight" :to="`/login`">登录</router-link></li>
        <!-- 路由跳转支持对象写法 -->
        <!-- 具名路由传值 对象传值 在vue-router 4.1.4版本就移除params对象隐式传值 不推荐 怕刷新-->
        <li><router-link :to="{
                            // path:'/login',//具名路由对象传值【隐式传值】 只能通过具名路由跳转才能传递对象
                            name:'Login',//可以根据路由名称跳转
                            params:{//路由传值 在组件里面通过 this.$route.params
                               tuijiancode:'xxx123', //params必须通过具名路由跳转才可以   
                               books:['十天精通js','5天精通vue'],
                               user:{username:'老谢',age:18}
                            }}">带推荐码的登录</router-link></li>
        <!-- query 地址栏传值 不怕 刷新 但是不能传递对象和数组..-->
        <!-- http://127.0.0.1:8080/#/login?code=xx123xx&books=%E5%A4%A9%E9%BE%99%E5%85%AB%E9%83%A8&books=%E7%A5%9E%E9%9B%95%E4%BE%A0%E4%BE%A3
            get传值有没有大小限制.
            [object+Object] 把对象作为字符串输出.
        -->
        <li><router-link :to="{
            path:'/login',query:{ code:'xx123xx',books:['天龙八部','神雕侠侣'],user:{username:'老谢',age:18}}
        }">带带字符串参数的跳转 query传值</router-link></li>
        <li>
            <router-link to="/login?code=周杰伦推荐">get传值</router-link>
        </li>
        <!-- 动态路由 不怕刷新 只能传递基本数据类型 -->
        <li><router-link to="/findpassword/liudehua">找回刘德华的密码</router-link></li>
        <li><router-link to="/findpassword/zhengshuang">找回郑爽的密码</router-link></li>
    </ol>
    <ul>
        <li>
            <!-- router-link默认被渲染成a标签 能不能换标签?? 在vue-router3 可以使用tag="li"指定路由渲染标签 -->
            <router-link to="/register">跳转到注册</router-link>
        </li>
        <!-- vue-router4里面 使用插槽来定制 router-link的渲染标签 -->
        <router-link custom v-slot="{href,navigate,route,isActive,isExactActive}" to="/register">
            <!-- href 路由导航路径path navigate是导航函数 一般用在自定义跳转 -->
            <!-- route 路由导航对象 等同 this.$route  isActive 地址栏地址和和当前路由路径匹配的时候激活状态true 不匹配false -->
            <li @dblclick="navigate" :style="{color:isActive?'red':''}">跳转到注册isActive</li>
        </router-link>
        <router-link custom v-slot="{href,navigate,route,isActive,isExactActive}" to="/register">
            <li @dblclick="navigate" :style="{color:isExactActive?'red':''}">跳转到注册isExactActive</li>
        </router-link>
        <li>
            <go-go path="/register" tag="span">跳转</go-go>
        </li>
        <!-- 替换跳转不会产生历史记录 -->
        <router-link custom to="/register" :replace="true" v-slot="{navigate,href,isActive}">
            <li @click="navigate">跳转到登录</li>
        </router-link>
    </ul>
    <!-- 编程式导航 用js实现跳转  $router对象 -->
    <!-- this.$router.push()  this.$router.replace()替换跳转不会产生历史记录
         this.$router.faward(); this.$router.back() this.$router.go();
         useRouter();
         useRoute();
         $router 比如今天跳转 用this.$router.push() 创建的vue-router对象,这个对象能实现路由导航 添加路由.管理路由等操作
         $route 比如昨天路由传值 在这个对象取值 它当前匹配的一条路由映射对象.
                $route里面存储的路由传值的参数,路由匹配的记录等.
    -->
    <button @click="$router.push('/register')">跳转到注册</button>
    <!-- 路由内置组件 路由渲染出口组件 当地址匹配到路由path路径的时候 对应的组件在这里渲染出来 -->
    <router-view abc="123"></router-view>
</template>

<style scoped>
.hightLight{
    color:red;
    font-weight: bold;
}
</style>
